import React, { useEffect, useState } from 'react'
import './App.css'

import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'

// 发布组件上下文(context)
export const AppContext = React.createContext()  // 可以接收一个初始参数

export default function App() {
  // 状态提升
  const [todoList, setTodoList] = useState([])

  useEffect(() => {
    setTodoList(JSON.parse(localStorage.getItem('todoList')) || [])
  }, [])

  useEffect(() => {
    localStorage.setItem('todoList', JSON.stringify(todoList))
  }, [todoList])

  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <AppContext.Provider value={{todoList, setTodoList}}>
          <Header />
          <List />
          <Footer />
        </AppContext.Provider>
      </div>
    </div>
  )
}
